<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GroupManagement - Group4 UniHub</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/components.css">
    <link rel="stylesheet" href="../styles/noticeboard.css">
    <link rel="stylesheet" href="../styles/group.css">
</head>
<body>
    <div id="header">
        <app-header 
            page-title="Group Management"
            header-image="../assets/images/header_group.png">
        </app-header>
    </div>
    
    <div class="main-container">
        <div id="sidebar"></div>
        
        <div class="content">
            <div class="search-section">
                <div class="search-container" id="searchContainer">
                    <input type="text" id="searchInput" placeholder="Please enter information to search for groups">
                    <button id="searchButton">Search</button>
                </div>
                <div class="filter-options">
                    <label><input type="checkbox" name="type" value="Sports"> Sports</label>
                    <label><input type="checkbox" name="type" value="Artistic"> Artistic</label>
                    <label><input type="checkbox" name="type" value="Academic"> Academic</label>
                    <label><input type="checkbox" name="type" value="Entertainment"> Entertainment</label>
                </div>
            </div>
            
            <div class="action-row">
                <button class="createGroup">Create Group</button>
            </div>

            <!-- Group Table -->
            <div id="groupContainer" class="table-container">
                <table id="groupTable">
                    <thead>
                        <tr>
                            <!-- <th>GroupID</th> -->
                            <th>GroupName</th>
                            <th>Description</th>
                            <th>Type</th>
                            <th>AdminName</th>
                            <th>MemberCount</th>
                            <th>Privacy</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be inserted here by JavaScript -->
                    </tbody>
                </table>
            </div>

            <!-- Edit Modal -->
            <div id="editModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <form id="editForm">
                        <h2>Edit Group</h2>
                        <label>Group Name:</label>
                        <input type="text" id="groupName" name="groupName" required>
                        <label>Type:</label>
                        <select id="type" name="type" required>
                            <option value="Sports">Sports</option>
                            <option value="Artistic">Artistic</option>
                            <option value="Academic">Academic</option>
                            <option value="Entertainment">Entertainment</option>
                        </select>
                        <label for="privacy">Privacy:</label>
                        <select id="privacy" name="privacy" required>
                            <option value="Public">Public</option>
                            <option value="Private">Private</option>
                        </select>
                        <label>Description:</label>
                        <textarea id="description" name="description" required></textarea>
                        <input type="hidden" id="groupId" name="groupId" required>
                        <button type="submit">Save Changes</button>
                    </form>
                </div>
            </div>

            <!-- Create Group Modal -->
            <div id="createModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>Create New Group</h2>
                    <form id="createForm">
                        <label>Group Name:</label>
                        <input type="text" id="createGroupName" name="groupName" required>
                        <label>Type:</label>
                        <select id="createType" name="type" required>
                            <option value="Sports">Sports</option>
                            <option value="Artistic">Artistic</option>
                            <option value="Academic">Academic</option>
                            <option value="Entertainment">Entertainment</option>
                        </select>
                        <label for="createPrivacy">Privacy:</label>
                        <select id="createPrivacy" name="privacy" required>
                            <option value="Public">Public</option>
                            <option value="Private">Private</option>
                        </select>
                        <label>Description:</label>
                        <textarea id="createDescription" name="description" required></textarea>
                        <button type="submit">Create Group</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="footer"></div>

    <script src="../components/header.js"></script>
    <script type="module" src="../components/sidebar.js"></script>
    <script src="../components/footer.js"></script>
    <script type="module" src="../scripts/group-management.js"></script>
</body>
</html> 